<template>
    <el-row>
        <el-card class="chapter-card">
            <el-col :span="22" :offset="1">
                <div class="clearfix chapter-head">
                    <h1>{{title}}</h1>
                </div>
                <div class="chapter-content" v-html="data" v-loading.body="loading">
                </div>
                <el-col class="footer-page" :span="6" :offset="1"><router-link :to="{ path: '/chapter/' + prev}"><el-button v-if="prev" type="text" icon="arrow-left">上一章</el-button></router-link></el-col>
                <el-col class="footer-page" :span="6" :offset="11"><router-link :to="{ path: '/chapter/' + next}"><el-button v-if="next" type="text">下一章<i class="el-icon-arrow-right el-icon--right"></i></el-button></router-link></el-col>
            </el-col>
           </el-card>
    </el-row>
</template>

<style lang="css" rel="stylesheet/css">
.chapter-card, .chapter-content {
    background-color:#F9FAFC;
    width:100%;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
.chapter-head {
    text-align:center;
}
.chapter-content{
    font-size:16px;
    line-height:22px;
    min-height:300px;
    color:#1F2D3D;
}
.footer-page {
    margin-top:10px;
    margin-bottom:25px;
}
</style>

<script type="text/babel">
export default{
    data(){
        return {
            title:'',
            data:'',
            prev:0,
            next:0,
            loading:true
        }
    },
    created () {
    // 组件创建完后获取数据，
    // 此时 data 已经被 observed 了
    this.fetch()
    },
    watch: {
        // 如果路由有变化，会再次执行该方法
        '$route': 'fetch'
    },
    methods: {
        fetch: function() {
            loading:true
            var _this = this
            var id = _this.$route.params.id
            if (id <= 0) {
                console.log("error novel_id")
            }
            _this.$http.get("http://novel.nightc.com/v1/chapter/" + id).then((response) => {
                var body = response.body
                if (body.code != undefined && body.code == 0) {
                    document.body.scrollTop = 0
                    document.documentElement.scrollTop = 0
                    _this.title = body.data.title
                    _this.data = body.data.data
                    _this.prev = body.prev
                    _this.next = body.next
                    _this.loading = false
                } else {
                    console.log(body)
                }
            })
        }
    }
}
</script>
